<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Compose Message</title>
    </h:head>
    <f:view beforePhase="#{UserDisplayManagedBean.doDisplay}">
    <h:body> 
        <p:growl id="growl" showDetail="true"/> 
        <p:growl id="notif" showDetail="true"/>
                <p:ajaxStatus style="width:16px;height:16px;">
                                        <f:facet name="start">
                                            <h:graphicImage value="25(2).gif" />
                                        </f:facet>
                                        <f:facet name="complete">
                                            <h:outputText value="" />
                                        </f:facet>
                                    </p:ajaxStatus>
        
          
        <h:form>
            <div id="container" style="position:relative">
            <div id="top" class="top">
                <h:graphicImage value="/image/newHeader.jpg"/>
            </div>
            <div id="content">
                     <p:poll interval="5"   
                            actionListener="#{MessageManagedBean.checkNewMessage}" update="notif" />
              <table>
                            <tr>
                                <td>
                                    <p:toolbar style="font-size:12px;margin-top:0%;height:30px;width:200px"> 
                                        <p:toolbarGroup align="right" >
                                            <p:button title="Home" image="ui-icon-home" outcome="AdminDeptWorkspace"/>                                  
                                            <p:button title="Notes" image="ui-icon-note"/>                                    
                                            <p:button title="Mail" outcome="messages" image="ui-icon-mail-closed"/>                                    
                                            <p:button title="Edit Preferences" image="ui-icon-gear"/>                                   
                                            <p:button title="Help" image="ui-icon-help"/>
                                            <p:commandButton title="Log Out" immediate="true" type="submit" image="ui-icon-close" actionListener="#{UserManagedBean.doLogout}"/> 
                                        </p:toolbarGroup>
                                    </p:toolbar></td>
                                <td>
                                    <h:graphicImage value="write_email.png" style="width:40px;height:40px" />
                                    <h:outputText value="         "/>
                                    <h:outputText value="Compose Mail" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                    <p:spacer width="100" height="10"/>
                                </td>
                            </tr>
                            <tr>
                               <td>    
                                    <p:menu style="width:200px; height:300px; font-family: Tahoma; font-size:12px;border-style: double;">  
                                        <p:submenu label="Main Menu"  >  
                                            <p:menuitem style="font-size:12px;font-family:Tahoma"  value="Home" url="http://localhost:8080/MerlionERP-war/userManagement/index.xhtml" ajax="false" icon="ui-icon ui-icon-home"/>  
                                        </p:submenu>  
                                    </p:menu>
                                    <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>

                                </td>
                                
                        <td style="font-family:Tahoma;font-size:11px;vertical-align:top" >
                            <table style="width:100%;border : 1px solid lavender" cellpadding="3" cellspacing="3" >
                                <tr width="100%">
                                    <td width="10%" align="left" > <h:outputLabel value="To" for="to" style="font-weight:bold"/></td>
                                    <td width="5%"><h:outputText value=":"/></td>
                                   
                                    <td><p:inputText id="to" value="#{MessageManagedBean.receiverId}" style="width:85%"/></td>
                                </tr>
                                <tr width="100%">
                                    <td width="10%" align="left" ><h:outputText value="Subject" style="font-weight:bold"/></td>
                                    <td width="5%"><h:outputText value=":"/></td>
                                    <td><p:inputText value="#{MessageManagedBean.title}" style="width:85%" /></td></tr>
                                    <tr><td  colspan="4" >
                <p:editor value="#{MessageManagedBean.body}" widgetVar="editor" width="1080"/>  </td>
                                    </tr>
                            </table>

                <h:panelGrid columns="10" style="text-align:right;margin-top:10px;font-size:12px;font-family: Tahoma">  
                    
                    <p:commandButton value="Send" update="display" actionListener="#{MessageManagedBean.sendMessage}"  
                                     image="ui-icon ui-icon-disk" />  
                    <p:commandButton type="button" value="Clear" onclick="editor.clear()"  
                                     image="ui-icon ui-icon-close" />  
                </h:panelGrid>  

                        </td>
                    </tr>
                </table>
            </div>
            <div id="bottom" class="bottom">
                <h:graphicImage value="/image/merlionfooter.jpg" />
            </div>
            </div>
        </h:form>
    </h:body>
        </f:view>
</html>
